import React from 'react';
import Request from '@ajax/index.jsx';
import Tools from '@untils/tools.jsx';
import {APIS_HELP_MANAGE} from '@apis/index.js';
import {helpManageFilters} from '@assets/config/global.js';


import RCTable from '@components/table/index.jsx';
import RCModal from '@components/modal/index.jsx';
import NavTree from '@components/nav_tree/index.jsx';
import PageTopFilter from '@components/page_top_filter/index.jsx';
import HelpManageModal from './help_manage_modal.jsx';
import './scss/index.scss';

const _req = new Request();

class HelpManage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            list: [],
            currentPage: 1,
            pageSize: 10,
            pagination: null,

            name: '',
            phone: '',
            selectedTreeKeys: [],
            expandedKeys: [],

            modalVisible: false,
            showFooter: false,
            delModalVisible: false,

            cadreData: null,
            poorData: null,
            currentStep: 0,
            deleteId: ''
        };
        this.setCallback = Tools.setCallback.bind(this);
        this.topFilterForm = null;
    }

    componentDidMount() {
        // this.requestList();
    }

    //请求列表
    requestList() {
        let {pageSize, currentPage, poorName, cadreName, selectedTreeKeys} = this.state;
        let data = {
            pagination: {
                currentPage: currentPage,
                order: "string",
                orderType: "ACCEPTDATE",
                pageSize: pageSize
            },
            searchContent: {
                poorName,
                cadreName,
                orgId: selectedTreeKeys[0] - 0 || 0
            }
        };
        let options = Tools.objectAssign(APIS_HELP_MANAGE.HELPLIST, {data});
        _req.ajaxList(options, this);
    }



    //table 刷新
    tableRefresh() {
        this.setCallback({poorName: '', cadreName: '', currentPage: 1}, this.requestList);
        this.topFilterForm&&this.topFilterForm.resetFields()
    }

    // 行点击
    onRowClick(record, show = false, currentStep = 2) {
        let {helpCadre: cadreData, helpPoor: poorData} = record;
        cadreData.time = record.time;
        cadreData.project = record.project;
        cadreData.money = record.money;
        cadreData.recordId = record.id;
        this.setCallback({cadreData, poorData, modalVisible: true, showFooter: show, currentStep});
    }

    //树筛选
    treeSeleted(selectedTreeKeys) {
        this.setCallback({selectedTreeKeys, currentPage: 1}, this.requestList);
        this.topFilterForm&&this.topFilterForm.resetFields()
    }

    //查询
    submitSelect(filtes) {
        this.setCallback({...filtes, currentPage: 1}, this.requestList)
    }

    // 新增
    appendHelp() {
        this.setCallback({modalVisible: true, showFooter: true, currentStep: 0, cadreData: null, poorData: null})
    }

    // 弹框取消
    modalCancelForm() {
        this.setCallback({modalVisible: false}/*, this.requestList*/);
    }


    // 删除确认
    delSubmit() {
        _req.axios(APIS_HELP_MANAGE.DELETEHELP(this.state.deleteId)).then(data => {
            this.setCallback({delModalVisible: false, deleteId: ''}, this.requestList);
        })
    }

    // 取消删除
    delCancel() {
        this.setCallback({delModalVisible: false, deleteId: ''});
    }

    render() {
        let {
            pagination = null,
            list = [],
            expandedKeys = [],
            selectedTreeKeys = [],
            modalVisible = false,
            showFooter = false,
            delModalVisible = false,
            cadreData = null,
            poorData = null,
            currentStep = 0
        } = this.state;

        const columns = [{
            title: '序号',
            key: '序号',
            render: (txt, row, index) => <span>{index + 1}</span>
        }, {
            title: '帮扶对象',
            dataIndex: 'helpPoor.name',
            key: 'name',
            render: (txt) => <p className="ell-1" title={txt || ''}>{txt || '---'}</p>
        }, {
            title: '家庭住址',
            dataIndex: 'helpPoor.address',
            key: 'address',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '帮扶项目',
            dataIndex: 'project',
            key: 'project',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '帮扶资金',
            dataIndex: 'money',
            key: 'money',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '帮扶时间',
            dataIndex: 'time',
            key: 'time',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '操作',
            render: (record) => {
                return (
                    <div className="option-btns">
                        <span className="btn-edit btn-item"
                            onClick={(e) => {
                                e.nativeEvent.stopImmediatePropagation();
                                e.stopPropagation();
                                this.onRowClick(record, true, 0)
                            }}
                        > </span>
                        <span className="btn-del btn-item"
                            onClick={(e) => {
                                e.nativeEvent.stopImmediatePropagation();
                                e.stopPropagation();
                                this.setCallback({deleteId: record.id, delModalVisible: true})
                            }}
                        > </span>
                    </div>
                )
            }
        }];
        return (
            <div className="help-manage child-wrap">
                <NavTree
                    navTitle={'组织信息'}
                    onSelect={this.treeSeleted.bind(this)}
                    // 展开受限制 要传expandedKeys onExpand selectedTreeKeys
                    // 以下三个都不传 是 一个自由组建
                    expandedKeys={expandedKeys}
                    selectedKeys={selectedTreeKeys}
                    onExpand={this.setCallback.bind(this)}
                />
                <div className="child-main-wrap">
                    <div className="child-main-content">
                        <PageTopFilter
                            title="帮扶记录查询"
                            filters={helpManageFilters}
                            buttons={['查询', '新增']}
                            submitForm={this.submitSelect.bind(this)}
                            cancelForm={this.appendHelp.bind(this)}
                            wrappedComponentRef={node => this.topFilterForm = node}
                        />
                        <RCTable
                            columns={columns}
                            dataSource={list}
                            pagination={pagination}
                            refresh={this.tableRefresh.bind(this)}
                            // 行点击
                            clickRow={this.onRowClick.bind(this)}
                            onChange={(pagination) => {
                                let {selectedRowKeys = [], current: currentPage, pageSize, name = ''} = pagination;
                                this.setCallback({selectedRowKeys, pageSize, currentPage, name}, this.requestList)
                            }}
                        />
                    </div>
                </div>
                {
                    modalVisible
                        ?<HelpManageModal
                            modalVisible={true}
                            poorData={poorData}
                            cadreData={cadreData}
                            showFooter={showFooter}
                            currentStep={currentStep}
                            cancelForm={this.modalCancelForm.bind(this)}
                        />
                        : null
                }

                {/*删除弹框*/}
                {
                    <RCModal
                        title='删除提示'
                        visible={delModalVisible}
                        onOk={this.delSubmit.bind(this)}
                        onCancel={this.delCancel.bind(this)}
                    >
                        <p className="del-warning">是否确认删除信息？</p>
                    </RCModal>
                }

            </div>
        )
    }
}

export default HelpManage;